<template>
  <Select v-model="innerValue" placeholder="请选择 ">
    <SelectOption :value="item.value" v-for="item in options">
      {{ item.title }}
    </SelectOption>
  </Select>
</template>
<script>
import {Select} from 'ant-design-vue';
import {createProps} from '@/utils';

export default {
  name: 'TestSelect',
  components: {
    Select,
    SelectOption: Select.Option
  },
  props: {
    value: createProps(String),
    title: createProps(String),
  },
  data() {
    return {
      options: [
        {title: 'test1', value: 'test1'},
        {title: 'test2', value: 'test2'},
        {title: 'test3', value: 'test3'}
      ]
    };
  },
  computed: {
    innerValue: {
      set(val) {
        this.$emit('change', val);
      },
      get() {
        return this.value;
      },
    }
  },
  watch: {
    value: {
      handler() {
        let o = this.options.find(o => o.value === this.value);
        this.$emit('changeTitle', o && o.title || undefined);
      },
      immediate: true
    }
  }
};
</script>